<template>
  <div class="r_item">
    <div class="num" @click="goAlbum">
      <span
        :class="[
          num == 1 ? 'top1' : '',
          num == 2 ? 'top2' : '',
          num == 3 ? 'top3' : '',
        ]"
        >{{ num | number }}</span
      >
    </div>
    <div class="r_com" @click="goAlbum">
      <div class="img">

          <slot></slot>
        
      </div>
      <div class="info">
        <div class="title">{{ title }}</div>
        <div class="des">{{ shortIntro || salePoint }}</div>
        <div class="btns" v-if="statCountInfo">
          <span class="count1"
            ><i class="font_family icon-a-24gl-play"></i>&nbsp;&nbsp;{{
              statCountInfo.playCount | getCount
            }}</span
          >
          <span class="count2"
            ><i class="font_family icon-shengyin_o"></i>&nbsp;&nbsp;{{
              statCountInfo.trackCount | getCount
            }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RItem",
  data() {
    return {};
  },
  filters: {
    number(val) {
      if (val == 1 || val == 2 || val == 3) {
        return "";
      } else {
        return val;
      }
    },
  },
  methods: {
    foo(e) {
      let img = e.srcElement;
      img.src = "../../assets/icon/common/img_load.png";
      img.onerror = null;
    },
    goAlbum(){
        this.$router.push('/album/'+this.albumId)
    }
  },
  props: {
    albumId: {
      type: Number,
    },
    img: {
      type: String,
    },
    title: {
      type: String,
    },
    shortIntro: {
      type: String,
    },
    statCountInfo: {
      type: Object,
    },
    num: {
      type: Number,
    },
    salePoint:{
      type:String
    }
  },
};
</script>

<style lang="scss" scoped>
.r_item {
  width: 100%;
  display: flex;

  .num {
    display: inline-block;

    padding: 15px 0;
    width: 34px;
    span {
      display: block;
      height: 19px;
      text-align: center;
      color: #40404c;
      font-size: 18px;
    }
    span.top1 {
      background-image: url(../../assets/icon/common/top1.png);
      background-repeat: no-repeat;
      background-size: 50% 19px;
      background-position: top center;
      color: #fff;
    }
    span.top2 {
      background-image: url(../../assets/icon/common/top2.png);
      background-repeat: no-repeat;
      background-size: 50% 19px;
      background-position: top center;
      color: #fff;
    }
    span.top3 {
      background-image: url(../../assets/icon/common/top3.png);
      background-repeat: no-repeat;
      background-size: 50% 19px;
      background-position: top center;
      color: #fff;
    }
  }

  .r_com {
    display: flex;
    padding: 15px 0;

    border-bottom: 1px solid #f3f4f5;
    .img {
      width: 70px;
      height: 70px;
      background: url(../../assets/icon/common/img_load.png) no-repeat;
      background-size: 100% 100%;
      border-radius: 4px;
      > img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
    .info {
      width: 185px;

      padding: 0 0px 0 15px;

      .title {
        color: #40404c;
        font-size: 16px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*设置或检索伸缩盒子对象的子元素的排列方式*/
        -webkit-line-clamp: 2;
      }
      .des {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        color: #999;
        margin: 5px 0 10px;
      }
      .btns {
        font-size: 12px;
        color: #999;
        span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>

